<!--
    GradientBordersTextView.vue
    gree_ctm

    Created by 汪明 on 09:47.
 -->
<template>
    <view class="GradientBordersTextView" :style="{
        border: props.bordeWidth + 'px' + ' solid transparent',
        borderRadius:borderRadius + 'px'
    }">
        <view class="title-view" :style="{fontSize: fontSize + 'px'}">{{ text }}</view>
    </view>
</template>

<script setup lang="ts">
import {computed} from "vue";
const props = defineProps<{
    bordeWidth: number | string,
    fontSize:number | string,
    text:string,
    borderRadius:number | string
}>()
</script>

<style scoped lang="scss">
.GradientBordersTextView {
    background-clip: padding-box, border-box;
    background-origin: padding-box, border-box;
    background-image: linear-gradient(to right, #ffffff, #ffffff), linear-gradient(90deg, #8F41E9, #578AEF);
    margin-right: 5px;
    .title-view {
        padding-left: 5px;
        padding-right: 5px;
        text-align: center;
        background-image: linear-gradient(to bottom, #8F41E9, #578AEF);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }
}
</style>
